<script setup lang="ts">
import { ref } from 'vue'
import type { ExerciseI, GetExerciseListParamsI } from '@/types/exercise'
import {
  createExerciseCollectUtil,
  deleteExerciseCollectUtil,
  getExerciseByFilterUtil,
} from '@/AGC/utils/exercise'
import { ElMessage } from 'element-plus'

// 筛选条件
const filter = ref<GetExerciseListParamsI>({
  name: '',
  sport_ability: 0,
  page: 1,
  pageSize: 6,
})
// 表格数据
const tableData = ref<ExerciseI[]>([])
const total = ref(0)
// 获取运动列表
const getExerciseList = async () => {
  try {
    const res = await getExerciseByFilterUtil(filter.value)
    tableData.value = res.data
    total.value = res.total
  } catch (error) {
    Promise.reject(error)
  }
}
setTimeout(async () => {
  getExerciseList()
}, 100)
// 搜索
const onSearch = () => {
  // 重置筛选条件
  filter.value.page = 1
  filter.value.pageSize = 6
  // 获取食物列表
  getExerciseList()
}
// 分页条数改变
const changePageSize = () => {
  filter.value.page = 1
  getExerciseList()
}
// 页码改变
const changePage = (page: number) => {
  filter.value.page = page
  getExerciseList()
}
// 取消收藏
const cancelCollect = async (id: number) => {
  try {
    await deleteExerciseCollectUtil(id)
    ElMessage.success('取消收藏成功')
    getExerciseList()
  } catch (error) {
    ElMessage.error('取消收藏失败')
    Promise.reject(error)
  }
}
// 收藏
const onCollect = async (id: number) => {
  try {
    await createExerciseCollectUtil(id)
    ElMessage.success('收藏成功')
    getExerciseList()
  } catch (error) {
    ElMessage.success('收藏失败')
    Promise.reject(error)
  }
}
</script>

<template>
  <div class="page-container">
    <el-card>
      <!-- 筛选条件 -->
      <template #header>
        <div class="card-header">
          <!-- 左边 -->
          <div style="display: flex; align-items: center">
            <div style="width: 100px; margin-bottom: 4px">运动项目:</div>
            <el-input
              v-model="filter.name"
              placeholder="请输入运动名称"
              size="medium"
              clearable
              style="margin: 0 10px 0 5px"
              @keyup.enter="onSearch"
            />
            <img src="@/assets/search.png" style="width: 21px; height: auto" @click="onSearch" />
          </div>
          <!-- 右边 -->
          <div>
            <el-radio-group v-model="filter.sport_ability" @change="onSearch">
              <el-radio :value="0" size="large">全部</el-radio>
              <el-radio :value="1.375" size="large">从未锻炼</el-radio>
              <el-radio :value="1.55" size="large">偶尔锻炼</el-radio>
              <el-radio :value="1.725" size="large">经常锻炼</el-radio>
            </el-radio-group>
          </div>
        </div>
      </template>
      <!-- 表格 -->
      <el-table style="height: 392px" :data="tableData" border>
        <el-table-column label="序号" type="index" width="80" align="center" />
        <el-table-column label="运动名称" prop="name" align="center" />
        <el-table-column label="运动量" prop="exercise_amount" align="center">
          <template #default="{ row }"> {{ row.exercise_amount }} {{ row.unit }} </template>
        </el-table-column>
        <el-table-column label="热量(千卡)" prop="calories" align="center" />
        <el-table-column label="状态" prop="status" align="center">
          <template #default="{ row }">
            <el-tag :type="row.status == 1 ? 'success' : 'warning'">
              {{ row.status == 1 ? '已收藏' : '未收藏' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-popconfirm
              title="确定取消收藏吗?"
              v-if="row.status == 1"
              @confirm="cancelCollect(row.id)"
            >
              <template #reference>
                <img src="@/assets/collect.svg" alt="" style="width: 35px; height: auto" />
              </template>
            </el-popconfirm>
            <img
              src="@/assets/uncollect.svg"
              alt=""
              style="width: 35px; height: auto"
              v-else
              @click="onCollect(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="filter.page"
        :page-size="filter.pageSize"
        layout="total, prev, pager, next, slot, jumper"
        :total="total"
        @current-change="changePage"
      >
        <el-select style="width: 95px" v-model="filter.pageSize" @change="changePageSize">
          <el-option label="6条/页" :value="6"></el-option>
          <el-option label="10条/页" :value="10"></el-option>
          <el-option label="15条/页" :value="15"></el-option>
        </el-select>
      </el-pagination>
    </el-card>
  </div>
</template>

<style scoped lang="less">
.page-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* 确保内边距和边框不会增加元素的总宽度和高度 */
  padding: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px; /* 添加内边距 */
    box-sizing: border-box; /* 确保内边距不会增加元素的总宽度和高度 */
  }

  .el-card {
    margin: 10px; /* 添加外边距 */
    box-sizing: border-box; /* 确保外边距不会增加元素的总宽度和高度 */
  }

  .el-table {
    box-sizing: border-box; /* 确保内边距不会增加元素的总宽度和高度 */

    ::v-deep(.el-table__header th) {
      background-color: rgb(237, 237, 237, 0.9);
      color: rgb(43, 37, 37);
      padding: 10px 0;
    }

    ::v-deep(.el-table__body tr) {
      height: 50px;
    }
  }

  .el-pagination {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0px;
  }
}
</style>
